<template>
  <div>
    <div class="carview">
      <div class="title">{{carlist[index].title}}</div>
      <div class="carpic" v-for="item in carlist[index].colorlist" :key="item.name" v-show="colorindex==item.index?true:false"><img :src="item.url" alt=""></div>
      <div>
        <div class="colorname" v-for="item in carlist[index].colorlist" :key="item.name" v-show="colorindex==item.index?true:false"><span></span>{{item.name}}</div>
        <ul>
          <li v-for="item in carlist[index].colorlist" :key="item.color" :style="`background:${item.color}`" @click="changecolor(item.index)"><i class="el-icon-success" v-if="colorindex==item.index?true:false"></i></li>
        </ul>
      </div>
    </div>
      <comp-footer></comp-footer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CompFooter from "@/components/comp-footer.vue";
export default {
  components: {
    CompFooter
  },
  data(){
    return{
      colorindex:1
    }
  },
  computed:{
    ...mapState(["carlist"]),
    index(){
      return this.$route.query.id
    },
  },
  methods:{
    changecolor(n){
      this.colorindex=n
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.colorindex = 1
    next()
  },
}
</script>

<style lang="scss" scoped>
.carview{
  padding-top: 50px;
  width: 1140px;
  margin: 0 auto;
  text-align: center;
  .title{
    color: #6e6e6e;
    font-size: 30px;
  }
  .carpic{
    img{
      height: 555px;
    }
  }
  .colorname{
    text-align: left;
    width: 600px;
    margin: 40px auto 0;
    font-size: 22px;
    color: #6e6e6e;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
    span{
      display: inline-block;
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-left:16px solid #6e6e6e;
    }
  }
  ul{
    display: flex;
    width: 600px;
    margin: 0 auto;
    flex-wrap: wrap;
    li{
      cursor: pointer;
      width: 96px;
      margin-right: 30px;
      height: 42px;
      margin-top: 20px;
      background: skyblue;
      position: relative;
      i{
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 20px;
      }
    }
    li:nth-child(5n){
      margin-right: 0px;
    }
  }
}

</style>